<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>订单列表</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link href="../../lib/layui-v2.6.3/css/layui.css" media="all" rel="stylesheet">
  <link href="../../css/public.css" media="all" rel="stylesheet">
  <link href="../../css/diy/form1.css" rel="stylesheet">
  <script src="../../lib/layui-v2.6.3/layui.js"></script>
  <script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
  <script src="../../js/template-web.js"></script>
  <script src="../../js/lay-module/layuimini/miniTab.js"></script>
  <script src="../../frontstatic/js/notify.js"></script>
  <script src="../../frontstatic/js/notify_stand.js"></script>
  <style type="text/css">
    .layui-table-cell {
      height: auto;
      line-height: 28px;
    }
  </style>
</head>
<body>
<div style="background-color: #FFFFFF;height: 200px;border-radius: 15px">
  <div style="padding-left: 40px;padding-top:15px">
    <img height="25" loading="lazy" src="../../images/shouzuo.png" width="25">
    <span>按条件进行检索</span>
  </div>
  <hr>
  <form class="layui-form" style="padding-top: 30px" lay-filter="exampleOrder">
    <div class="layui-inline">
      <label class="layui-form-label">订单编号：</label>
      <div class="layui-input-inline">
        <input autocomplete="off" class="layui-input" id="orderUuid" name="orderUuid" placeholder="请输入" type="text">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">订单状态：</label>
      <div class="layui-input-inline">
        <select name="orderstatic" id="orderstatic" lay-search>
          <option></option>
          <option value="0">未付款</option>
          <option value="1">已付款</option>
          <option value="2">已发货</option>
          <option value="3">已收货</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item" id="selectBtn">
      <div class="layui-input-block">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="layui-btn layui-btn-normal" id="orderButton" type="button">查询
      </button>
        <button class="layui-btn layui-btn-primary  layui-btn-sm" type="reset">重置</button>
      </div>
    </div>
  </form>
</div>
<div id="commditytable"style="height: auto">
  <div style="margin-left: -30px">
    <div style="width: 1650px">
      <table class="layui-table table-date" id="orderTable" lay-filter="orderTable"></table>
    </div>
  </div>
</div>
</body>
<script type="text/html" id="titleTpl">
    <span style="color: #a5a3a3">订单编号：{{d.orderUUID}}</span>
    {{# layui.each(d.steamShopingDataList, function(index, item){ }}
    <div>
      <div style="display: inline-block">
        <img src="{{item.image}}">
      </div>
      <div style="display: inline-block">
        <span>{{item.cname}}</span><br/>
        <span style="color: #827f7f">{{item.csku}}</span>
      </div>
    </div><br/>
    {{#  });}}
</script>
<script id="barlist" type="text/html">
  {{#  if(d.staticSlot == 1){ }}
  <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs " lay-event="byid">订单发货</a>
  {{#  } }}
  {{#  if(d.staticSlot == 2||d.staticSlot == 3){ }}
  <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs " lay-event="track">订单跟踪</a>
  {{#  } }}
  {{#  if(d.staticSlot == 3){ }}
  <a  class="layui-btn layui-btn-primary layui-border-black layui-btn-xs" lay-event="edit" >查看评价</a>
  {{#  } }}
  <a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
  var notify;
  layui.use(['notify'],function(){
    notify=layui.notify;
  })
  layui.use(['table','form'], function () {
    var table = layui.table;
    var layer = layui.layer;
    var form=layui.form;
    var orderDate={
      "flag":1
    };
    var tableIns =table.render({
      elem: '#orderTable'
      , method: 'post'
      , title: '商品数据表'
      , url: '/order/page' //数据接口
      , page: {theme: '#585a5c'}
      ,contentType:'application/json'
      , limit: 5
      ,where:orderDate
      ,even:'true'
      ,parseData: function(res){ //res 即为原始返回的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": res.data.total, //解析数据长度
          "data": res.data.records//解析数据列表
        };
      }
      , cols: [
        [ //表头
          {type: 'numbers', title: '序号'}
          ,{field: 'steamShopingDataList',width:260,templet: '#titleTpl',title: '商品名称'}
          , {field: 'prcies',width: 150,title: '总价'}
          , {field: 'orderStatic',width: 200,style:' color: #1E9FFF',title: '订单状态'}
          , {field: 'region',width: 200,title: '收货地址'}
          , {field: 'membetName',width: 100,title: '用户名称'}
          , {field: 'membetPhone',width: 130,title: '用户电话'}
          , {field: 'createTime',width: 200,title: '下单时间'}
          , {fixed: 'right', toolbar: '#barlist',width: 220,title: '操作'}
        ]
      ]
    });

    layui.$('#orderButton').on('click', function() {
      var data = form.val('exampleOrder');
      var orderDate = {
        "orderUuid": data.orderUuid,
        "orderStatic": data.orderstatic,
        "flag":1
      }
      tableIns.reload({
        where:orderDate
        ,page: {
          curr: 1
        }
      });
    })
    //监听行工具事件
    table.on('tool(orderTable)', function(obj){
      var data = obj.data;
     if(obj.event === 'del'){
        $.get("/order/del",{"id":data.orderId},function (e) {
          layer.confirm('确定删除？', function (index) {
            if (e.code==0) {
              obj.del();
              layer.close(index);
              notify.success(e.msg)
            }else {
              notify.error(e.msg)
            }
          });
        })
      }else if(obj.event === 'byid'){
        //查看订单详情
       layer.open({
          type: 2,
          title: '发货管理--'+data.orderUUID,
          fixed: false, //不固定
          maxmin: true, //开启最大化最小化按钮
          anim: 4,
          area: ['1400px', '90%'],
          scrollbar: false, //屏蔽滚动条
          content: 'OrderByid.html?orderId='+data.orderId+'&address='+data.address,
          end:function() {
           location.reload();
          }
        });
      }else if(obj.event === 'track'){
       //订单跟踪
       layer.open({
         type: 2,
         title: '物流信息--'+data.orderUUID,
         fixed: false, //不固定
         maxmin: true, //开启最大化最小化按钮
         anim: 4,
         area: ['1400px', '90%'],
         scrollbar: false, //屏蔽滚动条
         content: 'track.html?id='+data.orderId,
       });
     }
    });
  })
</script>
</html>